<template>
    <div class="account-container">
        <h2 class="page-title">账号安全</h2>

        <!-- 基本设置 -->
        <div class="section-card">
            <h3 class="section-title">基本设置</h3>
            <div class="setting-item">
                <div class="setting-info">
                    <div class="setting-main">
                        <span class="setting-name">登录密码</span>
                        <span class="setting-desc">登录膳养智选账号时需要输入的密码</span>
                    </div>
                    <div class="setting-status">
                        <span class="status-text">已设置</span>
                        <el-button type="text" class="modify-btn" @click="handlePasswordButtonClick">
                            修改
                        </el-button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 登录方式 -->
        <div class="section-card">
            <h3 class="section-title">登录方式</h3>
            <div class="setting-item">
                <div class="setting-info">
                    <div class="setting-main">
                        <span class="setting-name">帐密登录</span>
                        <span class="setting-desc">用户名+密码登录</span>
                    </div>
                    <div class="setting-status">
                        <span class="status-text enabled">已设置</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 登录保护 -->
        <div class="section-card">
            <h3 class="section-title">登录保护</h3>
            <div class="setting-item">
                <div class="setting-info">
                    <div class="setting-main">
                        <span class="setting-name">Cookie设置</span>
                        <span class="setting-desc">下次登录时是否自动登录</span>
                    </div>
                    <div class="setting-status">
                        <span class="username-text">{{ userInfo?.username }}</span>
                        <el-switch v-model="autoLogin" @change="handleAutoLoginChange" class="auto-login-switch" />
                    </div>
                </div>
            </div>
        </div>

        <!-- 安全检测动画对话框 -->
        <el-dialog v-model="showSecurityCheck" :show-close="false" :close-on-click-modal="false"
            :close-on-press-escape="false" width="400px" class="security-check-dialog">
            <div class="security-check-content">
                <img src="@/assets/koi.svg" alt="logo" class="check-logo">
                <div class="check-icon">
                    <el-icon class="rotating">
                        <Loading />
                    </el-icon>
                </div>
                <div class="check-text">
                    <p class="account-text">账号：{{ userInfo?.username }}</p>
                    <p class="checking-text">正在检测您的安全状态...</p>
                </div>
            </div>
        </el-dialog>

        <!-- 修改密码对话框 -->
        <el-dialog v-model="showPasswordDialog" title="修改密码" width="30%">
            <el-form :model="passwordForm" label-width="100px">
                <el-form-item label="原密码">
                    <el-input v-model="passwordForm.oldPassword" type="password" show-password />
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input v-model="passwordForm.newPassword" type="password" show-password />
                </el-form-item>
                <el-form-item label="确认新密码">
                    <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showPasswordDialog = false">取消</el-button>
                    <el-button type="primary" @click="handleUpdatePassword">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import { Loading } from '@element-plus/icons-vue'
import { UserUpdateService } from '@/api/user'

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)

const showSecurityCheck = ref(false)
const showPasswordDialog = ref(false)
const autoLogin = ref(localStorage.getItem('autoLogin') === 'true')

const passwordForm = ref({
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
})

// 处理自动登录开关
const handleAutoLoginChange = (value) => {
    localStorage.setItem('autoLogin', value)
    ElMessage.success(value ? '已开启自动登录' : '已关闭自动登录')
}

// 修改密码相关函数
const handleSecurityCheck = async () => {
    showSecurityCheck.value = true
    setTimeout(() => {
        showSecurityCheck.value = false
        showPasswordDialog.value = true
    }, 2000)
}

const handlePasswordButtonClick = () => {
    handleSecurityCheck()
}

const handleUpdatePassword = async () => {
    if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
        ElMessage.error('两次输入的密码不一致')
        return
    }

    try {
        const result = await UserUpdateService({
            id: userInfo.value.id,
            password: passwordForm.value.newPassword,
            oldPassword: passwordForm.value.oldPassword
        })
        if (result.code === 200) {
            ElMessage.success('密码修改成功')
            showPasswordDialog.value = false
            passwordForm.value = {
                oldPassword: '',
                newPassword: '',
                confirmPassword: ''
            }
        }
    } catch (error) {
        ElMessage.error('修改失败')
    }
}
</script>

<style scoped>
.account-container {
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.page-title {
    margin: 0 0 24px;
    font-size: 24px;
    color: #303133;
}

.section-card {
    background: white;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.section-title {
    margin: 0 0 20px;
    font-size: 18px;
    color: #303133;
}

.setting-item {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.setting-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.setting-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.setting-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setting-name {
    font-size: 16px;
    color: #303133;
}

.setting-desc {
    font-size: 14px;
    color: #909399;
}

.setting-status {
    display: flex;
    align-items: center;
    gap: 16px;
}

.status-text {
    font-size: 14px;
    color: #909399;
}

.status-text.enabled {
    color: #67C23A;
}

.modify-btn {
    color: #409EFF;
}

.username-text {
    font-size: 14px;
    color: #606266;
}

.auto-login-switch {
    --el-switch-on-color: #409EFF;
}

/* 安全检测对话框样式 */
.security-check-dialog :deep(.el-dialog__header) {
    display: none;
}

.security-check-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 30px;
}

.check-logo {
    width: 80px;
    height: 80px;
}

.check-icon {
    font-size: 40px;
    color: #409EFF;
}

.rotating {
    animation: rotate 1.5s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.check-text {
    text-align: center;
}

.account-text {
    margin: 0 0 8px;
    font-size: 16px;
    color: #303133;
}

.checking-text {
    margin: 0;
    font-size: 14px;
    color: #909399;
}
</style>
